<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            三维坐标系:
                x轴: 水平向右; 向右是正值, 向左是负值
                y轴: 垂直向下; 向下是正值, 向上是负值
                z轴: 垂直屏幕; 向外是正值, 向里是负值
        */

        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        div:hover{
            /* 
                translate3d(x,y,z)  
                注意：x和y轴我们有时候可以用百分比，z轴一般都是用px值，不会用百分比。
                注意：也可以用translateZ()实现z轴的运动，translateX,translateY同理
                注意：千万别忘了加上px单位，这个我们早就讲过，但是怕你忘了，还是提醒下

                当你运行以下代码，你会发现并没有什么盒子往外面移动了的效果，这是因为我们元素在z轴方位上的变换需要借助一个'透视'的东西配合一下才能看到效果。这个我们下节课再说，这节课你先把translate3d的注意事项记住就好
            */
            transform: translate3d(0px,0px,120px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>